<template>
  <div id="id">
    <router-link to="/aaa">查询天气</router-link>
          <router-link to="/english">每日一句</router-link>
          <router-link to="/wangyiyun">网易云热评</router-link>
          <router-link to="/recipe">菜谱查询</router-link>
          <router-link to="/shenghuo">生活小窍门</router-link>
          <router-link to="/BMITEST">BMI标准体重测试</router-link>
          <hr>
    <input type="text" id="userId" placeholder="请输入想要查询的菜品"/>
    <button v-on:click="change()">获取</button>
    <div id="page">
      <p>{{recipe.type_name}}</p>
      <p>{{recipe.cp_name}}</p>
      <p>{{recipe.zuofa}}</p>
      <p>{{recipe.texing}}</p>
      <p>{{recipe.tishi}}</p>
      <p>{{recipe.tiaoliao}}</p>
      <p>{{recipe.yuanliao}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "recipe",
    data(){
      return{
        recipe:'',
      }
    },
    methods:{
      change:function () {
        var val = $("#userId").val();
        let that=this;
        $.ajax({
          type:"GET",
          url:"http://api.tianapi.com/txapi/caipu/index?key=0c53d7b6b6dbbe5c3028d59fa6dbcbbd&word="+val,
          // data:{"id":val},     // data参数是可选的，有多种写法，也可以直接在url参数拼接参数上去，例如这样：url:"getUser?id="+val,
          data:"id="+val,
          async:true,   // 异步，默认开启，也就是$.ajax后面的代码是不是跟$.ajx里面的代码一起执行
          cache:true,  // 表示浏览器是否缓存被请求页面,默认是 true
          dataType:"json",   // 返回浏览器的数据类型，指定是json格式，前端这里才可以解析json数据
          success:function(data){
            data.newslist[0].type_name="种类 : "+data.newslist[0].type_name;
            data.newslist[0].cp_name="菜名 : "+data.newslist[0].cp_name;
            data.newslist[0].zuofa="做法 : "+data.newslist[0].zuofa;
            data.newslist[0].texing="特性 : "+data.newslist[0].texing;
            data.newslist[0].tishi="提示 : "+data.newslist[0].tishi;
            data.newslist[0].tiaoliao="调料 : "+data.newslist[0].tiaoliao;
            data.newslist[0].yuanliao="原料 : "+data.newslist[0].yuanliao;
            that.recipe=data.newslist[0];
            console.log(data);
          },
          error:function(){
            console.log("发生错误")
            alert("发生错误");
          },
          complete:function(){
            console.log("ajax请求完事，最终操作在这里完成")
          },
        });
      }
    },
    beforeCreate() {
    }
  }
</script>

<style scoped>
  #id{
    text-align: center;
  }
  #page{
    width:500px;
    height: 800px;
    margin: 0 auto;
    text-align: left;
  }
</style>
